* {
    margin: 0;
    padding: 0;
}
body {
    background: rgb(51, 47, 47);
}

.keyboard {
    width: 920px;
    height: 324px;
    margin: 100px auto;
    display: grid;
    grid-template-columns: repeat(30, 1fr);
    grid-template-rows: repeat(5, 1fr);
    gap: 10px;
    justify-content: center;
    align-items: center;
    border-radius: 15px;
    padding: 18px;
    background: black;
    overflow: hidden;
    box-shadow: -3px -3px 10px #fff, 3px 3px 6px #ddd;
    animation-timing-function: ease-in-out;
    animation-name: breathe;
    animation-duration: 15s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

.key {
    border-radius: 10px;
    grid-column: auto/span 2;
    display: grid;
    place-items: center;
    height: 51px;
    cursor: pointer;
    color: #fff;
    background: black;
    box-shadow: -3px -3px 10px #fff, 3px 3px 6px #ddd;
    transition: all .3s;


}

.key:hover {
    box-shadow: 0 0 0 #fff, 0 0 0 #ddd, inset 3px 3px 6px rgba(0, 0, 0, 0.2),
        inset -3px -3px 10px rgba(255, 255, 255, 0.3);
}

/*用于指定个别网格的大小类名*/
.kl3 {
    grid-column: auto/span 3;
}

.kl4 {
    grid-column: auto/span 4;
}

.kl5 {
    grid-column: auto/span 5;
}

.kl12 {
    grid-column: auto/span 12;
}

/*用于指定个别网格的颜色类名*/
.color1 {
    background: #ed4c67;
    color: #fbdbe1;
}

.color2 {
    background: #d63031;
    color: #f7d6d6;
}

.color3 {
    background: #12cbc4;
    color: #cafaf8;
}

.color4 {
    background: #ee5a24;
    color: #fcded3;
}

.color5 {
    background: #fdcb6e;
    color: #fff5e2;
}

.color6 {
    background: #1e90ff;
    color: #d2e9ff;
}

.color7 {
    background: #be2edd;
    color: #f2d5f8;
}

.color8 {
    background: #5352ed;
    color: #dddcfb;
}

.color9 {
    background: #26de81;
    color: #d4f8e6;
}

@keyframes breathe {
    0% {
        box-shadow: 0 1px 2px rgba(255, 255, 255, 0.1);
    }

   10% {

        box-shadow: 1px 1px 80px rgba(59, 255, 255, 1);
    }
    20%{
        box-shadow: 0 1px 2px rgba(255, 255, 255, 0.1);
    }
    30%{
        box-shadow: 1px 1px 80px rgb(235, 5, 82);
    }
    40%{
        box-shadow: 0 1px 2px rgba(255, 255, 255, 0.1);
    }
    50%{
        box-shadow: 1px 1px 80px rgb(15, 226, 15);
    }
    60%{
        box-shadow: 0 1px 2px rgba(255, 255, 255, 0.1);
    }
    70%{
        box-shadow: 1px 1px 80px rgb(72, 7, 223);
    }
    80%{
        box-shadow: 0 1px 2px rgba(255, 255, 255, 0.1);
    }
    100%{
        box-shadow: 1px 1px 80px rgb(184, 233, 9);
    }
}
